@extends('admin::layouts.app')

@section('content')
    <div class="container community">
        <div class="card">
            <div class="card-header">
                <h3 style="float: left;">社区管理</h3>
                <button type="button" @click="add()" class="btn btn-primary" style="float: right;">新建社区</button>
            </div>
            <div class="card-body">
                @if($info->count() > 0)
                    <table class="table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>社区名称</th>
                            <th>城市</th>
                            <th>区县</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                            @foreach($info as $v)
                                <tr>
                                    <td>{{$v->id ?? ''}}</td>
                                    <td>{{$v->name ?? ''}}</td>
                                    <td>{{$v->city->name ?? '无'}}</td>
                                    <td>{{$v->county->name ?? '无'}}</td>
                                    <td>
                                        <button type="button" class="btn" @click="remove({{$v->id}})">删除</button>
                                        <button type="button" class="btn" @click="edit({{$v->id}})">修改</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{$info->links()}}
                @endif
            </div>
        </div>
        <confirm-component ref="confirm"></confirm-component>
    </div>
@endsection
@section('scripts')
    <script>
        new Vue({
            el:'#app',
            mounted() {

            },
            data() {
                return {

                }
            },
            methods:{
                remove(id) {
                    this.$refs.confirm.dialog('您确定要删除该信息吗？',() => {
                        axios.post('/admin/communities/delete',{id:id}).then((response) =>{
                            if (response.status) {
                                window.location.reload();
                            }
                        }).catch(function (error){
                            console.log(error)
                        });
                    },function(){

                    });
                },
                add() {
                    $('#community-form').remove();
                    axios.get('{{route('admin.communities.form')}}').then((response) => {
                        $('.container.community').append(response.data);
                        $('#community-form').modal('show');
                    }).catch((error) => {
                        console.log(error)
                    });
                },
                edit(id) {
                    $('#community-form').remove();
                    axios.get('{{route('admin.communities.form')}}/' + id).then((response) => {
                        $('.container.community').append(response.data);
                        $('#community-form').modal('show');
                    }).catch((error) => {
                        console.log(error)
                    });

                },
            }
        });
    </script>
@endsection
